<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" href="/vendor/bootstrap-3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="/assets/css/common.css">

	<style>
		.container {
			width: 1200px!important;
		}
		.register-base {
			height: 112px;
			width: 100%;
		}
		.register-container {
			width: 100%;
			display: table;
			background: rgba(0, 255, 0, 0.3);
		}
		.register-row {
			display: table-row;
		}
		.register-cell {
			height: 112px;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.register-column {
			/*float: left;*/
			display: inline-block;
			vertical-align: middle;
			height: 53px;
			line-height: 51px;
			padding: 0;
		}
		.register-column + .register-column {
			margin-left: 10px;
		}
		.register-column.register-item {
			height: 51px;
			line-height: 50px;
			border: 1px solid #555;
			overflow: hidden;
			background: white;
		}
		.register-item input,
		.register-item select {
			line-height: initial;
			-webkit-appearance: none;	/*去除input默认样式*/
			border: none;
			padding: 0 15px;
			width: inherit;
			outline: none;
		}
		.register-item-a {
			width: 200px;
		}
		.register-item-b {
			width: 320px;
		}
		.content-dummy {
			height: 500px;
			background: rgba(0, 0, 255, 0.3);
		}
		.content-dummy:nth-child(even) {
			background: rgba(255, 255, 0, 0.3);
		}
		.register-fixed {
			position: fixed;
			bottom: 0;
			left: -100%;
			width: 100%;
			transition: all 0.3s;
		}
		.register-handler {
			position: fixed;
			bottom: 0;
			left: -300px;
			width: 150px;
			height: 150px;
			background: rgba(255, 0, 0, 0.3);
			transition: all 0.3s;
		}
		.register-handler img {
			width: 150px;
			height: 150px;
		}
	</style>
</head>
<body>
	<div id="menu"></div>

	<div class="container">
		<div class="row">
			<div class="banner"></div>
		</div>
		<!-- 目标 -->
		<div class="target" id="register"></div>
		
		<div class="content-dummy"></div>
		<div class="content-dummy"></div>
		<div class="content-dummy"></div>
	</div>

	<script src="/vendor/jquery-1.12.4/jquery.min.js"></script>
	<script src="/vendor/bootstrap-3.3.7/js/bootstrap.min.js"></script>

	<script src="/assets/js/common.js"></script>

	<script type="text/javascript">
		;(function (factory) {
			'use strict';
			if (typeof define === 'function' && define.amd) {
				// AMD模式
				define(['jquery'], factory);
			} else {
				// 全局模式
				factory(jQuery);
			}
		}(function ($, undefined) {
			function initForm($this) {
				var formTemp =
					'<div class="register-container">' +
						'<div class="register-row">' +
							'<div class="register-cell">' +
								'<div class="register-column" style="font-size: 24px; font-weight: 900;">' +
									'<label style="line-height: 32px; margin-top: -7px;">立即预约<br>抢占先机</label>' +
								'</div>' +
								'<div class="register-column register-item register-item-a">' +
									'<input type="text" name="name" placeholder="孩子姓名:" autocomplete="off">' +
								'</div>' +
								'<div class="register-column register-item register-item-a">' +
									'<input type="text" name="tel" placeholder="家长电话:" autocomplete="off">' +
								'</div>' +
								'<div class="register-column register-item register-item-b">' +
									'<select name="school" autocomplete="off">' +
										'<option value="">请选择离您最近的校区</option>' +
										'<option value="1">校区1</option>' +
										'<option value="2">校区2</option>' +
										'<option value="3">校区3</option>' +
									'</select>' +
								'</div>' +
								'<div class="register-column">' +
									'<button class="btn btn-warning btn-block register-column" style="width: 150px; font-size: 22px; font-weight: 900;">立即预约</button>' +
								'</div>' +
							'</div>' +
							'<button class="btn btn-danger close-btn" style="width: 51px; height: 51px; font-size: 36px; position: relative; right: 15px; top: 31px; line-height: 51px; padding-top: 0;">&times;</button>' +
						'</div>' +
					'</div>';
				var $fm = $(formTemp);
				$this.append($fm);
				$this.addClass('register-base');
				$this.data('$fm', $fm);
			}

			function getScrollTop() {
				var scrollTop = 0;
				if (document.documentElement && document.documentElement.scrollTop) {
					scrollTop = document.documentElement.scrollTop;
				} else if (document.body) {
					scrollTop = document.body.scrollTop;
				}
				return scrollTop;
			}

			$.fn.register = function() {
				var that = this;

				$(that).each(function() {
					var $this = $(this);
					initForm($this);

					// 注册表单层
					var $regCtn = $this.find('.register-container');
					console.log('$regCtn.length>>>', $regCtn.length);
					// 把手对象
					var $handler = undefined;
					// 是否弹出框(false: 状态1, true: 状态2)
					var isActived = false;
					// 是否正在弹出
					var isRunning = false;
					// 是否正在倒计时
					var isCD = false;
					// 计时任务
					var ttask = undefined;

					// 弹出层重置方法，归位，隐藏重置按钮，状态0
					function reset() {
						// 状态还原
						isActived = false;
						isRunning = false;
						isCD = false;
						if (ttask !== undefined) {
							clearTimeout(ttask);
						}
						
						// 注册框位置还原
						$regCtn.removeClass('register-fixed');
						$regCtn.attr('style', '');

						// 清除掉多余的事件监听
						$regCtn.off('mouseover').off('mouseout');

						// 把手层清除
						$regCtn.next().remove();
						$handler = undefined;
					}

					// 弹出把手，收回表单，状态1
					function popHandler() {
						// 浮动模式
						$regCtn.addClass('register-fixed');
						// 还原到一开始的状态
						$regCtn.attr('style', '');

						// 收回注册表单
						if (!isRunning) {
							isRunning = true;
							$regCtn.animate({left: "-100%"}, "slow", "swing", function() {
								// 弹出把手层
								$handler.animate({left: "0px"}, "slow", "swing", function() {
									isRunning = false;
								});
							});
						}

						// 没有把手，加“把手”
						if (!$regCtn.next().is('.register-handler')) {
							$handler = $(
								'<div class="register-handler">' +
									'<img src="/assets/img/icon.png" alt="点我" />' +
								'</div>'
							);
							$regCtn.after($handler);
							
							// 点击弹出注册表单层
							$handler.on('click', popRegister);
						}
					}

					// 启动倒计时
					function startCountDown() {
						if (!isCD) {
							// 倒计时自动触发事件
							ttask = setTimeout(function() {
								popHandler();
								isCD = false;
							}, 5000);
							isCD = true;
						}
					}

					// 结束倒计时
					function terminateCountDown() {
						if (ttask !== undefined) {
							clearTimeout(ttask);
							isCD = false;
						}
					}

					// 弹出注册表单，收回把手，状态2
					function popRegister() {
						// 收回把手层
						if (!isRunning) {
							console.log('收回把手');
							isRunning = true;
							$handler.animate({left: "-150px"}, "slow", "swing", function() {
								// 弹出form层
								$regCtn.animate({left: "0px"}, "slow", "swing", function() {
									isRunning = false;
								});
							});	
						}

						startCountDown();

						// 加鼠标进入，清除ttask的监听
						$regCtn.off('mouseover').off('mouseout');
						$regCtn.on('mouseover', function() {
							terminateCountDown();

							// 加鼠标退出，重新建立5s的ttask任务的监听
							$regCtn.off('mouseout');
							$regCtn.on('mouseout', function() {
								// 启动计时，到时返回状态1
								startCountDown();
							});
						});
					}

					// 绑定滚动事件
					$(window).scroll(function(evt) {
						var scrollTop = getScrollTop();			// 滚动条位置
						var windowHeight = $(window).height();	// 显示区域高度

						// console.log(scrollTop, '>', windowHeight, '=?=>', (scrollTop > windowHeight));

						// 如果小于1屏，一切还原
						if (scrollTop <= windowHeight) {
							reset();
						}
						// 如果大于1屏
						else {
							// 避免多次触发
							if (!isRunning) {
								// 如果不是激活状态，弹出门把手
								if (!isActived) {
									popHandler();
									isActived = true;
								}

								// 如果是激活状态，不做任何事儿
								else {
									console.log('isActived');
								}
							}

							// 如果是正在弹出状态，不做任何事儿
							else {
								console.log('isRunning');
							}
						}
					});
				});
			};
		}));
	</script>
	<script>
		$('#register').register();
	</script>
</body>
</html>